<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <my-breadcrumb>内容管理</my-breadcrumb>
      </div>
      <el-form ref="form" :model="form" label-width="80px">

        <my-status v-model="form.status"></my-status>
      <!--   <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            如果选择了全部，则将status设置为null,在发请求时，axios就是会自动忽略这个参数
            就不向后端传递
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!-- <my-channel ref="refChannel"></my-channel> -->

        <!-- 监听子组件上的change-channel事件 -->
        <!-- <my-channel @change-channel="hChangeChannel"></my-channel> -->

        <my-channel v-model="form.channelId"></my-channel>
        <!-- <el-form-item label="频道">
          <el-select v-model="form.region" placeholder="请选择频道">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="日期">
          <el-col :span="11">
            <el-date-picker
            v-model="form.dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%;">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
          :loading="isLoading"
          type="primary" @click="hSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 显示数据的表格区域 -->
    <el-card style="margin-top:1em">
      <div slot="header" class="clearfix">
        根据筛选条件共查询到{{total_count}}条结果:
      </div>

      <!--
        表格组件
        1. 表格的列：结构。
          列由el-table-column决定。
          label：决定当前列显示出的标题(文案)
          prop：决定当前列数据的来源。（prop="date"）对于表格来说，
                它的数据是一个数组，每一个元素是一个对象，表示一行。
                这里的prop就是用来从每一个对象中取出属性名为prop值（date）的
                属性值。

        2. 表格的行，数据。数据是一个数组，每一个元素是一个对象，表示一行。

      -->
      <!-- v-for, v-show: 指令， v-focus -->
      <!-- v-loading: 是element-ui中自己封装的指令 -->
      <el-table
        v-loading="isLoading"
        :data="articles"
        border
        style="width: 100%">
        <el-table-column
          label="封面"
          width="180">
          <template slot-scope="scope">
            <!-- 显示当前这一行的图片 -->
            <!-- {{scope.row.cover.images[0]}} -->
          <!-- 对于自定义模板列
            1. 不需要设置prop
            2. slot-scope="scope" 用来指定在template中可以通过scope来获取当前行的信息
                scope.row: 表示当前行的数据
                scope.row.cover.images[0] 表示这一行中的封面的地址
          -->
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover.images[0]">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="280">
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <!-- 根据当前行的数据来决定显示什么 -->
            <!-- 0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除 -->
            <!-- {{scope.row.status}} -->
            <el-tag v-if="scope.row.status===0">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="info">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="pubdate"
          label="发布时间">
        </el-table-column>

        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <!-- scope.$index, scope.row

            scope.$index: 行索引。第几行。从0开始的
            scope.row ： 行数据。就是当前行的那个对象
            -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="hEdit(scope.$index, scope.row)"></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="hDelete(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :disabled="isLoading"
        style="margin-top: 1em;"
        background
        :page-size="10"
        layout="prev, pager, next"
        @current-change="hPageChange"
        :total="total_count">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 1. 导入组件
// import MyChannel from '@/components/channel.vue'
import MyStatus from '@/components/status.vue'
// import MyBreadcrumb from '@/components/breadcrumb.vue'
// 2. 注册
// 3. 使用

export default {
  name: 'articleList',
  data () {
    return {
      form: {
        channelId: null, // 当前用户选中的频道
        dateRange: null, // 表示一个时间区间
        // 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除，不传为全部
        status: null // 表示要筛选的文章的状态
      },
      articles: [],
      isLoading: false, // 是否正在加载数据
      total_count: 0, // 总页数
      curPage: 1 // 当前页码。默认是第1页
    }
  },
  components: {
    // MyChannel,
    MyStatus
    // MyBreadcrumb
  },
  created () {
    // 父组件的created
    this.loadArticles()
  },
  methods: {
    // 当子组件channel.vue抛出事件change-channel时，这个方法会调用
    hChangeChannel (channelId) {
      console.log('父组件中回调函数执行了....', channelId)
      this.form.channelId = channelId
    },
    //  拼接查询参数
    getCond () {
      const { dateRange, status, channelId } = this.form
      const queryObj = {
        page: this.curPage,
        status
      }
      // 1) 检查用户是否选择了日期区域
      if (dateRange) {
        // 当用户选择了日期区域之后，dateRange就是一个数组
        // 需要补充参数
        queryObj.begin_pubdate = dateRange[0]
        queryObj.end_pubdate = dateRange[1]
      }
      // 2) 检查是否选中了频道
      // 由于在created时，就会调用一次查询，而此时，子组件并没有创建出来
      // 所以this.$refs.refChannel是不存在的
      // if (this.$refs.refChannel && this.$refs.refChannel.channelId) {
      //   queryObj.channel_id = this.$refs.refChannel.channelId
      //   console.log('频道下拉中选中的是：', this.$refs.refChannel.channelId)
      // } else {
      //   queryObj.channel_id = null
      // }
      if (channelId) {
        queryObj.channel_id = channelId
      } else {
        // 只有当参数的值是null，axios在发请求时，就不会带上这个参数
        queryObj.channel_id = null
      }

      return queryObj
    },
    async loadArticles () {
      // 1. 拼接查询参数
      const queryObj = this.getCond()
      // 2. 发ajax获取数据
      //   2.1 更改loading
      this.isLoading = true
      try {
        const res = await this.$http({
          method: 'GET',
          // url: '/mp/v1_0/articles?page=' + this.curPage
          url: '/mp/v1_0/articles',
          // 请求类型是get，参数会以查询字符串的格式附加在url地址栏中。
          // http://ttapi.research.itcast.cn/mp/v1_0/articles?page=100
          // params: 是axios中约定的名字。
          params: queryObj
        })
        // 更新当前表格数据
        this.articles = res.data.data.results
        // 更新总页数
        this.total_count = res.data.data.total_count
        // 恢复loading状态
        this.isLoading = false
      } catch (err) {
        console.log(err)
        this.$message.error('获取数据失败')
        // 更新当前表格数据
        this.articles = []
        // 更新总页数
        this.total_count = 0
        // 恢复loading状态
        this.isLoading = false
      }
    },
    // 用户点击了分页
    hPageChange (curPage) {
      // alert(curPage)
      // 1. 更新页码
      this.curPage = curPage
      // 2. 重新发请求
      this.loadArticles()
    },
    hSearch () {
      // 查询
      this.loadArticles()
    },
    // 用户点击了编辑按钮
    hEdit (index, row) {
      // 路由跳转
      const idStr = row.id.toString()
      this.$router.push('/edit/' + idStr)
    },
    async doDelete (idObj) {
      console.log('你要删除的数据的id是', idObj.toString())
      // 发ajax做删除
      try {
        const res = await this.$http({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + idObj.toString()
        })
        console.log(res)
        // 1. 提示
        this.$message.success('删除成功')
        // 2. 重新加载数据
        this.loadArticles()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    // 用户点击删除
    hDelete (index, row) {
      console.log(index, row)
      // 1. 让用户确认是否真的要删除
      // 问一下：是否要退出
      this.$confirm('你真的要删除吗?').then(() => {
        // 确定删除
        this.doDelete(row.id)
      }).catch(() => {
        // 取消退出 . 这里不要删除了。如果删除了，promise的结构就不完整了，当用户点了取消之后
        // 就会报错误
      })
    }
  }
}
</script>

